<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录界面</title>
    <link rel="stylesheet" href="dist/css/layui.css">
    <script src="dist/layui.js"></script>
    <link rel="stylesheet" href="dist/css/index.css">
</head>
<body>

<div class="content">
    <h2>勤工助学系统</h2>
    <form class="layui-form" action="">
        <!-- 账号 -->
        <div class="layui-form-item" id="uid">
            <label class="layui-form-label"><span>学号/工号:</span></label>
            <div class="layui-input-block">
                <input type="text" name="uid" required  lay-verify="uid" placeholder="请输入学号/工号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 密码 -->
        <div class="layui-form-item" id="password">
            <label class="layui-form-label"><span>密码:</span></label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 身份 -->
        <div class="layui-form-item">
            <label class="layui-form-label"><span>身份:</span></label>
            <div class="layui-input-block" id="identity">
                <input type="radio" name="identity" value="student" title="学生" checked>
                <input type="radio" name="identity" value="counselor" title="辅导员" >
                <input type="radio" name="identity" value="dept" title="部门员工" >
                <input type="radio" name="identity" value="admin" title="管理员" >
            </div>
        </div>

        <!-- 登录 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="login">登录</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,$ = layui.jquery;

        // 登录验证
        form.verify({
            //value：表单的值、item：表单的DOM对象
            uid: function(value){
                if(!new RegExp("^[1-9][0-9]{4,9}$").test(value)){
                    return '学号/工号有误';
                }
                if(!new RegExp("^[\\S]{5,10}$").test(value)){
                    return '学号/工号有误';
                }
            }
            ,password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        form.on('submit(login)',function(data){
            $.ajax({
                url:'user/login',
                async: false,
                type:'post',
                data:data.field,
                dataType:'JSON',
                success:function(data){
                    if(data === -1) {
                        layer.open({
                            type:0,
                            content:'用户名或者密码错误',
                            icon:2
                        });
                    }
                    else {
                        location.href = data;
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>

